<template>
  <Dialog v-model="dialogVisible" title="页面设置" width="600px" @close="handleClose">
    <div class="page-settings-content">
      <!-- 分段控制器 -->
      <Segmented
        v-model="activeTab"
        :options="tabOptions"
        :block="true"
        @change="handleTabChange"
      />

      <!-- 内容区域 -->
      <div class="page-settings-body">
        <!-- 页边距 -->
        <div v-if="activeTab === 'margin'" class="page-settings-section">
          <div class="margin-settings-container">
            <!-- 左侧输入区域 -->
            <div class="margin-inputs">
              <div class="margin-input-item">
                <label class="margin-input-label">上</label>
                <el-input-number
                  v-model="marginValues.top.value"
                  :min="0"
                  :max="50"
                  :precision="2"
                  :step="0.1"
                  controls-position="right"
                  class="margin-input-number"
                />
                <UnitSelect
                  v-model="marginValues.top.unit"
                  :options="unitOptions"
                />
              </div>
              <div class="margin-input-item">
                <label class="margin-input-label">下</label>
                <el-input-number
                  v-model="marginValues.bottom.value"
                  :min="0"
                  :max="50"
                  :precision="2"
                  :step="0.1"
                  controls-position="right"
                  class="margin-input-number"
                />
                <UnitSelect
                  v-model="marginValues.bottom.unit"
                  :options="unitOptions"
                />
              </div>
              <div class="margin-input-item">
                <label class="margin-input-label">左</label>
                <el-input-number
                  v-model="marginValues.left.value"
                  :min="0"
                  :max="50"
                  :precision="2"
                  :step="0.1"
                  controls-position="right"
                  class="margin-input-number"
                />
                <UnitSelect
                  v-model="marginValues.left.unit"
                  :options="unitOptions"
                />
              </div>
              <div class="margin-input-item">
                <label class="margin-input-label">右</label>
                <el-input-number
                  v-model="marginValues.right.value"
                  :min="0"
                  :max="50"
                  :precision="2"
                  :step="0.1"
                  controls-position="right"
                  class="margin-input-number"
                />
                <UnitSelect
                  v-model="marginValues.right.unit"
                  :options="unitOptions"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 纸张 -->
        <div v-if="activeTab === 'paper'" class="page-settings-section">
          <div class="paper-settings-container">
            <!-- 左侧输入区域 -->
            <div class="paper-inputs">
              <!-- 纸张设置 -->
              <div class="page-settings-subsection">
                <h3 class="page-settings-subtitle">纸张设置</h3>
                <div class="page-settings-row">
                  <div class="page-settings-item full-width">
                    <label class="page-settings-label">纸张大小</label>
                    <el-select
                      v-model="selectedPageSize"
                      placeholder="请选择纸张大小"
                      class="page-settings-select"
                      @change="handlePageSizeChange"
                    >
                      <el-option
                        v-for="size in pageSizes"
                        :key="getPageSizeValue(size)"
                        :label="getPageSizeLabel(size)"
                        :value="getPageSizeValue(size)"
                      />
                    </el-select>
                  </div>
                </div>
            <div class="page-settings-row page-settings-row-vertical">
              <div class="page-settings-item">
                <label class="page-settings-label">宽度</label>
                <el-input-number
                  v-model="pageSizeValues.width"
                  :min="1"
                  :max="100"
                  :precision="2"
                  :step="0.1"
                  controls-position="right"
                  class="page-settings-input"
                />
                <span class="page-settings-unit">厘米</span>
              </div>
              <div class="page-settings-item">
                <label class="page-settings-label">高度</label>
                <el-input-number
                  v-model="pageSizeValues.height"
                  :min="1"
                  :max="100"
                  :precision="2"
                  :step="0.1"
                  controls-position="right"
                  class="page-settings-input"
                />
                <span class="page-settings-unit">厘米</span>
              </div>
            </div>
              </div>

              <!-- 纸张方向 -->
              <div class="page-settings-subsection">
                <h3 class="page-settings-subtitle">纸张方向</h3>
                <div class="page-orientation-options">
                  <div
                    class="page-orientation-option"
                    :class="{ active: pageOrientation === 'portrait' }"
                    @click="setPageOrientation('portrait')"
                  >
                    <div class="page-orientation-preview portrait">
                      <div class="preview-page-wrapper">
                        <div class="preview-page">
                          <div class="preview-page-shine"></div>
                        </div>
                      </div>
                    </div>
                    <div class="page-orientation-info">
                      <span class="page-orientation-label">纵向</span>
                    </div>
                  </div>
                  <div
                    class="page-orientation-option"
                    :class="{ active: pageOrientation === 'landscape' }"
                    @click="setPageOrientation('landscape')"
                  >
                    <div class="page-orientation-preview landscape">
                      <div class="preview-page-wrapper">
                        <div class="preview-page">
                          <div class="preview-page-shine"></div>
                        </div>
                      </div>
                    </div>
                    <div class="page-orientation-info">
                      <span class="page-orientation-label">横向</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 布局 -->
        <div v-if="activeTab === 'layout'" class="page-settings-section">
          <div class="page-settings-empty">暂未实现</div>
        </div>

        <!-- 右侧预览区域（固定，不随标签页变化） -->
        <div class="page-settings-preview">
          <PagePreview
            :width="pageSizeValues.width"
            :height="pageSizeValues.height"
            :orientation="pageOrientation"
            :margin-top="marginValues.top.value"
            :margin-top-unit="marginValues.top.unit"
            :margin-bottom="marginValues.bottom.value"
            :margin-bottom-unit="marginValues.bottom.unit"
            :margin-left="marginValues.left.value"
            :margin-left-unit="marginValues.left.unit"
            :margin-right="marginValues.right.value"
            :margin-right-unit="marginValues.right.unit"
          />
        </div>
      </div>
    </div>

    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch, inject, nextTick, type Ref } from "vue";
import { Dialog } from "../../../dialog";
import { Segmented } from "../../../segmented";
import UnitSelect from "./UnitSelect.vue";
import PagePreview from "./PagePreview.vue";
import type { PageOption, PageSize } from "../../../../types";
import { PAGE_SETTINGS_TAB_OPTIONS, UNIT_OPTIONS } from "../../../../config/constants";

defineOptions({
  name: "PageSettings",
});

const props = withDefaults(
  defineProps<{
    modelValue: boolean;
    pageSizes?: PageSize[];
    defaultTab?: "margin" | "paper" | "layout";
  }>(),
  {
    defaultTab: "margin",
  }
);

const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();

// 注入页面配置
const pageOptions = inject<Ref<PageOption>>("page");

// 弹窗显示状态
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
});

// 分段控制器选项（从配置中获取）
const tabOptions = PAGE_SETTINGS_TAB_OPTIONS;

// 当前激活的标签
const activeTab = ref<string | number | boolean>("margin");

// 单位选项（从配置中获取）
const unitOptions = UNIT_OPTIONS;

// 页边距单位和值
const marginValues = ref({
  top: { value: 2.54, unit: "cm" },
  bottom: { value: 2.54, unit: "cm" },
  left: { value: 3.18, unit: "cm" },
  right: { value: 3.18, unit: "cm" },
});

// 纸张方向
const pageOrientation = ref<"portrait" | "landscape">("portrait");

// 选中的纸张大小
const selectedPageSize = ref<string>("");

// 标记是否正在切换方向（用于避免方向切换时触发纸张大小匹配检查）
const isChangingOrientation = ref(false);

// 纸张尺寸值
const pageSizeValues = ref({
  width: 21.0,
  height: 29.7,
});

// 获取页面尺寸标签
const getPageSizeLabel = (size: PageSize): string => {
  const label = size.label;
  return typeof label === "string" ? label : label.zh_CN || label.en_US || "";
};

// 获取页面尺寸值
const getPageSizeValue = (size: PageSize): string => {
  // 如果是自定义（width 和 height 都为 0），返回 "custom"
  if (size.width === 0 && size.height === 0) {
    return "custom";
  }
  return `${size.width}x${size.height}`;
};

// 处理标签切换
const handleTabChange = (value: string | number | boolean) => {
  activeTab.value = value;
};

// 检查当前宽高是否匹配预设的纸张大小
const checkPageSizeMatch = () => {
  const currentWidth = pageSizeValues.value.width;
  const currentHeight = pageSizeValues.value.height;
  
  // 检查是否匹配任何预设大小（考虑原始尺寸和交换后的尺寸）
  // 例如：A4纸是21.0×29.7，不管是宽21高29.7还是宽29.7高21，都应该是A4
  let found: PageSize | undefined;
  let isRotated = false;
  
  for (const s of props.pageSizes || []) {
    // 跳过自定义选项（width 和 height 都为 0）
    if (s.width === 0 && s.height === 0) continue;
    
    // 精确匹配（允许小误差，因为浮点数比较）
    // 匹配原始尺寸：宽高都匹配
    const originalMatch = 
      Math.abs(s.width - currentWidth) < 0.01 && 
      Math.abs(s.height - currentHeight) < 0.01;
    
    // 匹配旋转后的尺寸：宽高交换后匹配
    const rotatedMatch = 
      Math.abs(s.width - currentHeight) < 0.01 && 
      Math.abs(s.height - currentWidth) < 0.01;
    
    if (originalMatch) {
      found = s;
      isRotated = false;
      break;
    } else if (rotatedMatch) {
      found = s;
      isRotated = true;
      break;
    }
  }
  
  if (found) {
    // 找到匹配的预设大小，立即切换到对应的纸张大小
    // 使用原始值（width×height），因为这是预设的标识
    selectedPageSize.value = getPageSizeValue(found);
    
    // 判断预设纸张的原始方向（宽 < 高 = 纵向，宽 > 高 = 横向）
    const presetIsPortrait = found.width < found.height;
    
    if (isRotated) {
      // 匹配的是旋转后的尺寸（例如：A4预设是21×29.7，用户输入29.7×21）
      // 说明用户输入的是旋转后的值，需要将方向设置为与预设相反的方向
      // 标记正在切换方向，避免触发纸张大小匹配检查
      isChangingOrientation.value = true;
      // 预设是纵向，但用户输入是横向，所以设置为横向
      // 预设是横向，但用户输入是纵向，所以设置为纵向
      pageOrientation.value = presetIsPortrait ? "landscape" : "portrait";
      // 不交换宽高值，保持用户输入的旋转后的值
      nextTick(() => {
        isChangingOrientation.value = false;
      });
    } else {
      // 匹配的是原始尺寸（例如：A4预设是21×29.7，用户输入21×29.7）
      // 说明用户输入的是未旋转的值，需要将方向设置为与预设一致的方向
      // 标记正在切换方向，避免触发纸张大小匹配检查
      isChangingOrientation.value = true;
      pageOrientation.value = presetIsPortrait ? "portrait" : "landscape";
      // 如果当前显示值与预设方向不一致，需要调整显示值
      // 例如：预设是纵向（21×29.7），但当前显示是横向（29.7×21），需要交换回来
      const currentIsPortrait = currentWidth < currentHeight;
      if (presetIsPortrait !== currentIsPortrait) {
        const temp = pageSizeValues.value.width;
        pageSizeValues.value.width = pageSizeValues.value.height;
        pageSizeValues.value.height = temp;
      }
      nextTick(() => {
        isChangingOrientation.value = false;
      });
    }
  } else {
    // 不匹配任何预设大小，切换到自定义
    selectedPageSize.value = "custom";
  }
};

// 处理纸张大小变化
const handlePageSizeChange = (value: string) => {
  // 如果选择的是自定义，不更新宽高值
  if (value === "custom") {
    return;
  }
  
  const size = props.pageSizes?.find(
    (s) => getPageSizeValue(s) === value
  );
  if (size) {
    // 根据当前方向设置宽高显示值
    if (pageOrientation.value === "portrait") {
      // 纵向：宽 < 高
      pageSizeValues.value = {
        width: Math.min(size.width, size.height),
        height: Math.max(size.width, size.height),
      };
    } else {
      // 横向：宽 > 高
      pageSizeValues.value = {
        width: Math.max(size.width, size.height),
        height: Math.min(size.width, size.height),
      };
    }
  }
};

// 设置纸张方向
const setPageOrientation = (orientation: "portrait" | "landscape") => {
  if (orientation === pageOrientation.value) return;
  
  // 标记正在切换方向，避免触发纸张大小匹配检查
  isChangingOrientation.value = true;
  
  pageOrientation.value = orientation;
  // 切换方向时交换宽高显示值（仅用于显示，不影响实际存储的纸张大小）
  const temp = pageSizeValues.value.width;
  pageSizeValues.value.width = pageSizeValues.value.height;
  pageSizeValues.value.height = temp;
  
  // 使用 nextTick 确保宽高值已更新后再重置标记
  nextTick(() => {
    isChangingOrientation.value = false;
  });
};

// 初始化数据
const initData = () => {
  if (pageOptions?.value) {
    // 初始化页边距
    if (pageOptions.value.margin) {
      marginValues.value = {
        top: {
          value: pageOptions.value.margin.top || 2.54,
          unit: "cm",
        },
        bottom: {
          value: pageOptions.value.margin.bottom || 2.54,
          unit: "cm",
        },
        left: {
          value: pageOptions.value.margin.left || 3.18,
          unit: "cm",
        },
        right: {
          value: pageOptions.value.margin.right || 3.18,
          unit: "cm",
        },
      };
    }

    // 初始化纸张方向
    if (pageOptions.value.orientation) {
      const orientation = pageOptions.value.orientation;
      if (orientation === "portrait" || orientation === "landscape") {
        pageOrientation.value = orientation;
      }
    }

    // 初始化纸张大小
    if (pageOptions.value.size) {
      const size = pageOptions.value.size;
      // 根据当前方向设置显示值（纵向时宽<高，横向时宽>高）
      if (pageOrientation.value === "portrait") {
        // 纵向：宽 < 高
        pageSizeValues.value = {
          width: Math.min(size.width, size.height),
          height: Math.max(size.width, size.height),
        };
      } else {
        // 横向：宽 > 高
        pageSizeValues.value = {
          width: Math.max(size.width, size.height),
          height: Math.min(size.width, size.height),
        };
      }
      
      // 尝试匹配预设的纸张大小
      checkPageSizeMatch();
    }
  }
};

// 监听宽高变化，自动切换纸张大小
watch(
  () => [pageSizeValues.value.width, pageSizeValues.value.height],
  () => {
    // 如果正在切换方向，不触发纸张大小匹配检查
    if (isChangingOrientation.value) {
      return;
    }
    checkPageSizeMatch();
  },
  { deep: true }
);

// 监听弹窗打开
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal) {
      // 设置默认激活的标签页
      activeTab.value = props.defaultTab || "margin";
      initData();
    }
  },
  { immediate: true }
);

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false;
};

// 单位转换函数（转换为厘米）
const convertToCm = (value: number, unit: string): number => {
  switch (unit) {
    case "pt": // 磅转厘米: 1pt = 0.0352778cm
      return value * 0.0352778;
    case "in": // 英寸转厘米: 1in = 2.54cm
      return value * 2.54;
    case "cm": // 厘米
      return value;
    case "mm": // 毫米转厘米: 1mm = 0.1cm
      return value * 0.1;
    default:
      return value;
  }
};


// 确认
const handleConfirm = () => {
  if (pageOptions?.value) {
    // 更新页边距（统一转换为厘米）
    pageOptions.value.margin = {
      top: convertToCm(marginValues.value.top.value, marginValues.value.top.unit),
      bottom: convertToCm(marginValues.value.bottom.value, marginValues.value.bottom.unit),
      left: convertToCm(marginValues.value.left.value, marginValues.value.left.unit),
      right: convertToCm(marginValues.value.right.value, marginValues.value.right.unit),
    };

    // 更新纸张方向
    pageOptions.value.orientation = pageOrientation.value;

    // 更新纸张大小
    // 注意：Page.vue 会根据 orientation 自动交换宽高显示，所以这里需要保存原始值
    // 如果方向是纵向，保存 min/max；如果方向是横向，保存 max/min（但需要根据原始预设值来判断）
    // 实际上，我们需要保存纸张的原始尺寸（不受方向影响），Page.vue 会根据 orientation 自动处理显示
    if (pageOptions.value.size) {
      // 获取原始尺寸（不受方向影响的值）
      // 如果当前方向是纵向，pageSizeValues 已经是 min/max 的形式
      // 如果当前方向是横向，pageSizeValues 是 max/min 的形式
      // 我们需要保存原始预设的尺寸值，而不是根据方向调整后的值
      const originalSize = props.pageSizes?.find(
        (s) => getPageSizeValue(s) === selectedPageSize.value
      );
      
      if (originalSize && originalSize.width !== 0 && originalSize.height !== 0) {
        // 如果匹配到预设大小，保存原始预设值
        pageOptions.value.size = {
          ...pageOptions.value.size,
          width: originalSize.width,
          height: originalSize.height,
        };
      } else {
        // 如果是自定义大小，需要根据当前方向保存正确的值
        // 如果当前是纵向，pageSizeValues 就是原始值（宽<高）
        // 如果当前是横向，pageSizeValues 是交换后的值，需要交换回来保存原始值
        if (pageOrientation.value === "portrait") {
          // 纵向：pageSizeValues 就是原始值（宽<高）
          pageOptions.value.size = {
            ...pageOptions.value.size,
            width: pageSizeValues.value.width,
            height: pageSizeValues.value.height,
          };
        } else {
          // 横向：pageSizeValues 是交换后的值，需要交换回来保存原始值（宽<高）
          pageOptions.value.size = {
            ...pageOptions.value.size,
            width: pageSizeValues.value.height, // 交换回来
            height: pageSizeValues.value.width, // 交换回来
          };
        }
      }
    } else {
      // 如果没有 size，创建一个新的
      // 根据当前方向保存原始值
      if (pageOrientation.value === "portrait") {
        pageOptions.value.size = {
          label: "自定义",
          width: pageSizeValues.value.width,
          height: pageSizeValues.value.height,
        };
      } else {
        // 横向时，需要交换回来保存原始值
        pageOptions.value.size = {
          label: "自定义",
          width: pageSizeValues.value.height,
          height: pageSizeValues.value.width,
        };
      }
    }
  }
  handleClose();
};
</script>

<style lang="scss" scoped>
.page-settings-content {
  padding: 20px 0;
}

.page-settings-body {
  margin-top: 24px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.page-settings-section {
  flex: 1;
  min-width: 0; /* 防止flex子元素溢出 */
}

.page-settings-subsection {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-settings-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--editor-text-color);
  margin: 0;
}

.page-settings-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }

  &.page-settings-row-vertical {
    flex-direction: column;
    gap: 12px;
  }
}

.page-settings-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;

  &.full-width {
    flex: 1 1 100%;
  }
}

.page-settings-label {
  font-size: 14px;
  color: var(--editor-text-color);
  min-width: 40px;
  text-align: right;
}

.page-settings-input {
  flex: 1;
  max-width: 120px;
}

.page-settings-select {
  flex: 1;
  max-width: 200px;
}

.page-settings-unit {
  font-size: 14px;
  color: var(--editor-text-color-light);
  min-width: 40px;
}

.page-settings-empty {
  padding: 40px;
  text-align: center;
  color: var(--editor-text-color-light);
  font-size: 14px;
}

.margin-settings-container {
  flex: 1;
}

.margin-inputs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.margin-input-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.margin-input-label {
  font-size: 14px;
  color: var(--editor-text-color);
  min-width: 30px;
  text-align: right;
}

.margin-input-number {
  flex: 1;
  max-width: 100px;
}

.margin-input-unit {
  font-size: 14px;
  color: var(--editor-text-color-light);
  min-width: 40px;
}


.margin-preview-line {
  position: absolute;
  background-color: var(--editor-primary-color, #0D61F2);
  border-radius: 0;
}

.margin-preview-line.margin-top {
  left: 0;
  width: 100%;
  height: 2px;
}

.margin-preview-line.margin-bottom {
  left: 0;
  width: 100%;
  height: 2px;
}

.margin-preview-line.margin-left {
  top: 0;
  width: 2px;
  height: 100%;
}

.margin-preview-line.margin-right {
  top: 0;
  width: 2px;
  height: 100%;
}

/* 暗色主题适配 */
[theme-mode="dark"] {
  .margin-preview-page {
    background-color: #1a1a1a;
    border-color: var(--editor-border-color);
  }
}

.paper-settings-container {
  flex: 1;
}

.paper-inputs {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.paper-preview-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
}

.paper-preview-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--editor-text-color);
  text-align: center;
}

.paper-preview-orientation {
  font-size: 12px;
  color: var(--editor-text-color-light);
  text-align: center;
}

/* 暗色主题适配 - 纸张预览 */
[theme-mode="dark"] {
  .paper-preview-page {
    background-color: #1a1a1a;
    border-color: var(--editor-border-color);
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.3),
      0 2px 4px rgba(0, 0, 0, 0.2);
  }
}

.page-orientation-options {
  display: flex;
  gap: 8px;
  padding: 0;
}

.page-orientation-option {
  flex: 0 0 auto;
  width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border: 2px solid var(--editor-border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--editor-color-white);
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &:hover {
    border-color: var(--editor-primary-color);
    background-color: color-mix(
      in srgb,
      var(--editor-primary-color) 4%,
      transparent
    );
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

    &::before {
      opacity: 1;
    }
  }

  &.active {
    border-color: var(--editor-primary-color);
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--editor-primary-color) 8%, transparent) 0%,
      color-mix(in srgb, var(--editor-primary-color) 12%, transparent) 100%
    );
    box-shadow: 0 2px 10px color-mix(
      in srgb,
      var(--editor-primary-color) 20%,
      transparent
    );

    .page-orientation-label {
      color: var(--editor-primary-color);
      font-weight: 600;
    }
  }
}

.page-orientation-preview {
  width: 40px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--editor-container-background) 0%,
    color-mix(in srgb, var(--editor-container-background) 95%, var(--editor-border-color)) 100%
  );
  border-radius: 4px;
  position: relative;
  padding: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);

  &.portrait {
    .preview-page-wrapper {
      width: 24px;
      height: 32px;
    }
  }

  &.landscape {
    .preview-page-wrapper {
      width: 32px;
      height: 24px;
    }
  }
}

.preview-page-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  .page-orientation-option:hover & {
    transform: scale(1.03);
  }

  .page-orientation-option.active & {
    transform: scale(1.05);
  }
}

.preview-page {
  width: 100%;
  height: 100%;
  background-color: var(--editor-color-white);
  border: 1.5px solid var(--editor-border-color);
  border-radius: 3px;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  .page-orientation-option.active & {
    border-color: var(--editor-primary-color);
    box-shadow: 
      0 3px 6px color-mix(in srgb, var(--editor-primary-color) 15%, transparent),
      0 1px 2px rgba(0, 0, 0, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
}

.preview-page-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

.page-orientation-info {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-orientation-label {
  font-size: 12px;
  color: var(--editor-text-color);
  font-weight: 500;
  transition: all 0.3s ease;
}

/* 暗色主题适配 */
[theme-mode="dark"] {
  .page-orientation-option {
    background-color: var(--editor-color-dark);
    border-color: var(--editor-border-color);

    &::before {
      background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
      );
    }

    &:hover {
      background-color: color-mix(
        in srgb,
        var(--editor-primary-color) 4%,
        transparent
      );
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    &.active {
      background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--editor-primary-color) 12%, transparent) 0%,
        color-mix(in srgb, var(--editor-primary-color) 18%, transparent) 100%
      );
      box-shadow: 0 4px 16px color-mix(
        in srgb,
        var(--editor-primary-color) 30%,
        transparent
      );
    }
  }

  .page-orientation-preview {
    background: linear-gradient(
      135deg,
      var(--editor-container-background) 0%,
      color-mix(in srgb, var(--editor-container-background) 90%, var(--editor-border-color)) 100%
    );
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .preview-page {
    background-color: var(--editor-page-background);
    border-color: var(--editor-border-color);
    box-shadow: 
      0 4px 8px rgba(0, 0, 0, 0.3),
      0 2px 4px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);

    .page-orientation-option.active & {
      box-shadow: 
        0 6px 12px color-mix(in srgb, var(--editor-primary-color) 25%, transparent),
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
  }

  .preview-page-shine {
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 100%
    );
  }
}

.page-settings-preview {
  flex: 0 0 220px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0;
  position: sticky;
  top: 0;
  height: fit-content;
}
</style>

